<template>
  <div class="box">
    <div class="box1">
      <span class="companypic"
        ><img
          :src="'http://120.48.37.120:9000/parttime/' + company.companypic"
          alt=""
      /></span>
      <div class="name">
        <span class="companyname">{{ company.companyname }}</span>
        <span class="total">在招职位{{ total }}</span>
      </div>
      <div class="company1">
        <a
          class="attention"
          v-if="attentionflag == true"
          href="javascript:void(0)"
          @click="cancelattention"
          >取消关注</a
        >
        <a class="attention" v-else href="javascript:void(0)" @click="attention"
          >关注</a
        >
      </div>
    </div>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="企业详情" name="first">
          <div class="tab">
            <div class="advantage">
              <span
                >公司优势：
                <p>{{ company.comadvantage }}</p></span
              >
            </div>
            <div>
              <span>公司负责人：</span>
              <div class="person">
                <p>
                  姓名：<a>{{ company.principal }}</a>
                </p>
                <p>
                  联系方式：<a>{{ company.phone }}</a>
                </p>
                <p>
                  邮箱：<a>{{ company.email }}</a>
                </p>
              </div>
            </div>
            <div class="companyprofile">
              <span>公司简历：</span>
              <p>{{ company.profile }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="招聘职位" name="second">
          <!-- 学历 地点 查询 -->
          <div>
            <ul class="searchul">
              <li>
                <span
                  >学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历&nbsp;&nbsp;：</span
                >
                <el-select
                  v-model="searchForm.eduid"
                  placeholder="请选择"
                  @change="handlecEduChange"
                >
                  <el-option
                    v-for="item in edulist"
                    :key="item.id"
                    :label="item.eduname"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </li>
              <li>
                <span>岗位分类&nbsp;&nbsp;：</span>
                <el-cascader
                  expand-trigger="hover"
                  :options="catelist"
                  :props="cateProps"
                  v-model="searchForm.cateids"
                  @change="handlecCatedChange"
                >
                </el-cascader>
              </li>
            </ul>
          </div >
          <div class="hotwork">
            <ul >
              <li v-for="(recruit, index) in recruitlist" :key="index">
                <div class="job">
                  <span class="jobs">{{ recruit.jobs }}</span>
                  <span class="salary">{{ recruit.salary }}</span>
                  <a class="eduname">{{ recruit.eduname }}</a>
                </div>
                <div class="company">
                  <span class="companyname">{{ recruit.companyname }}</span>
                  <span class="placename">{{ recruit.placename }}</span>
                  <a class="catename">{{recruit.catename}}</a>
                </div>
                <div class="btn">
                  <el-button type="success" @click="RecruitDetail(recruit)"
                    >查看详情</el-button
                  >
                </div>
              </li>
            </ul>
          </div>
          <div class="page">
            <!-- 分页区域 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.pagenum"
              :page-sizes="[1, 5, 8, 10]"
              :page-size="searchForm.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      company: {},
      user: {},
      attentionflag: '',
      activeName: 'first',
      searchForm: {
        querystring: '',
        pagenum: 1,
        pagesize: 1,
        cateids: '',
        placeids: '',
        eduid: '',
      }, //搜索选项
      catelist: [],
      edulist: [],
      recruitlist: [],
      total: 0,
      cateProps: {
        label: 'catename',
        value: 'id',
        children: 'children',
      },
    }
  },
  created() {
    this.getCompany(), //企业信息
      this.getCateList(), //职位分类信息
      this.educationlist() //学历信息
  },
  methods: {
    //获取企业信息
    async getCompany() {
      this.company.id = window.sessionStorage.getItem('comid')
      this.user = JSON.parse(window.sessionStorage.getItem('user'))
      console.log(this.company.id)
      const { data: res } = await this.$http.get('company/' + this.company.id)
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.company = res.data
      console.log(this.company)
      this.ifattention() //是否关注
      this.getrecruitlist() //职位信息
    },
    //是否关注企业
    async ifattention() {
      const { data: res } = await this.$http.get(
        '/IfAttention?companyid=' +
          this.company.companyid +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) {
        this.attentionflag = false
      } else {
        this.attentionflag = true
      }
    },
    //关注企业
    async attention() {
      const { data: res } = await this.$http.get(
        '/AddAttention?companyid=' +
          this.recruit.companyid +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getRecruitById()
    },
    //取消关注企业
    async cancelattention() {
      const { data: res } = await this.$http.get(
        '/DeleteAttention?companyid=' +
          this.recruit.companyid +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getRecruitById()
    },
    // 获取所有岗位分类数据
    async getCateList() {
      const { data: res } = await this.$http.get('categories')

      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.catelist = res.data
    },
    // 获取所有学历分类数据
    async educationlist() {
      const { data: res } = await this.$http.get('educations')
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.edulist = res.data
    },
    // 级联选择器选中项变化，会触发这个函数
    handlecCatedChange() {
      this.getrecruitlist()
    },
    handlecEduChange() {
      this.getrecruitlist()
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.searchForm.pagesize = newSize
      this.getrecruitlist()
    },
    //监听页码值改变的数据
    handleCurrentChange(newPage) {
      this.searchForm.pagenum = newPage
      this.getrecruitlist()
    },
    //获取岗位信息
    async getrecruitlist() {
      this.searchForm.querystring = this.company.companyname
      const form = _.cloneDeep(this.searchForm)
      if (form.cateids != '') {
        form.cateids = form.cateids.join(',')
      }
      console.log(form)
      const { data: res } = await this.$http.get('SearchRecruidByComId/'+this.company.id, {
        params: form,
      })
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.recruitlist = res.data.records
      this.total = res.data.total
    },
    async RecruitDetail(recruit) {
      window.sessionStorage.setItem('place',recruit.place)
        window.sessionStorage.setItem("Recruitid",recruit.id)
      this.$router.push('/RecruitDetail')
    },
  },
}
</script>

<style lang="less" scoped>
.box {
  margin: 0 auto;
  width: 80%;
  padding: 20px;
  .box1 {
    padding: 20px;
    width: 100%;
    height: 150px;
    background-color: #fff;
    border-radius: 20px;
    .companypic {
      width: 120px;
      height: 145px;
      display: block;
      float: left;
      margin-left: 2%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      float: left;
      width: 60%;
    }
    .companyname {
      font-size: 32px;
      font-weight: 700;
      display: block;
      margin-left: 20px;
      height: 75px;
      line-height: 80px;
    }
    .total {
      display: block;
      margin-left: 20px;
      height: 40px;
      line-height: 40px;
    }
    .company1 {
      height: 155px;
      .attention {
        line-height: 155px;
        margin: 0 0 0 30px;
        color: #ff6400;
        font-weight: 900;
        text-decoration: none;
        font-size: 23px;
      }
    }
  }
  .tab {
    width: 100%;
    margin-top: 20px;
    /deep/ .el-tabs__item {
      margin-top: 20px;
      font-size: 20px;
    }
    > div {
      width: 100%;
      background-color: #fff;
      margin-bottom: 20px;
      border-radius: 20px;
      > span {
        width: 100%;
        font-size: 21px;
        font-weight: 700;
        padding: 20px 30px 20px 30px;
        height: 40px;
        display: block;
      }
    }
    .advantage {
      p {
        display: inline-block;
        margin: 5px 8px 10px 1%;
        padding: 0 10px;
        height: 29px;
        line-height: 29px;
        color: #32be4a;
        border: 1px solid #32be4a;
        border-radius: 2px;
      }
    }
    .person {
      font-size: 20px;
      padding-bottom: 20px;
      margin-left: 30px;
      > p {
        font-weight: 600px;
      }
      > a {
        margin-right: 10px;
      }
    }
    .companyprofile {
      height: 200px;
      > p {
        width: 90%;
        margin: 0 auto;
      }
    }
  }
  .searchul {
    width: 90%;
    height: 145px;
    padding-top: 10px;
    background-color: #fff;
    border-radius: 20px;
    margin: 0 auto;
    li {
    list-style: none;
    margin-top: 20px;
    li > span {
      display: inline-block;
      width: 100px;
    }
  }
  }
  
  .page {
    margin: 0 auto;
    padding-left: 12%;
    margin-top: 10px;
    background-color: #fff;
    padding-top: 20px;
  }
  .hotwork {
    width: 100%;
    margin: 0 auto;
    li {
      padding: 10px 0px 0 20px;
      list-style-type: none;
      margin: 0 auto;
      background-color: pink;
      width: 90%;
      height: 145px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 10px;
      .job {
        margin-top: 15px;
        width: 33%;
      }
      .company {
        width: 33%;
      }
      .btn {
        float: right;
        padding-right: 116px;
        padding-top: 30px;
      }
      .jobs {
        font-size: 23px;
        font-weight: 700;
        display: block;
        margin-bottom: 10px;
      }
      .salary {
        font-size: 20px;
        font-weight: 600;
        display: block;
        margin-bottom: 10px;
        color: red;
      }
      .eduname {
        font-size: 14px;
        margin-bottom: 10px;
        color: #7d6695;
        background-color: #f6f7f8;
        text-align: center;
        border-radius: 12px;
        padding: 5px 8px 5px 8px;
      }
      .company {
        padding-left: 20px;
      }
      .companyname {
        font-size: 18px;
        margin: 22px 0 15px 0;
        font-weight: 700;
      }
      .placename {
        color: #999999;
        margin-bottom: 10px;
      }
      .catename{
            font-size: 14px;
            margin-bottom: 10px;
            color: #7D6695;
            background-color: #F6F7F8;
            text-align: center;
            border-radius: 12px;
            padding:5px 8px 5px 8px;
            margin-top: 10px;
        }
      div {
        float: left;
      }
      span {
        display: block;
      }
    }
    li:hover {
      box-shadow: 1px 1px 5px #888888;
    }
  }
}
</style>